<template>
    <el-card shadow="never">
      <el-input v-model="deptName" placeholder="部门名称" clearable>
        <template #prefix>
          <i-ep-search />
        </template>
      </el-input>
      <el-tree default-expand-all class="mt-2" :filter-node-method="filterNode" ref="treeRef" :data="deptOptions"
        :props="{ children: 'children', label: 'label', disabled: '' }" :expand-on-click-node="false"
        @node-click="handleNodeClick" />
    </el-card>
</template>

<script lang="ts" setup>
import { getDictDept } from '@/api/base/base' // 部门数据
//let deptOptions = ref<SelectOptionType[]>()
const props = defineProps({
  // 这里的名字规定为：modelValue
  modelValue: {
    type: [Number],
    default: undefined,
  },
  deptOptions: {
    type: Array as PropType<SelectOptionType[]>,
    default: []
  }
});
const emits = defineEmits(["node-click"]);
let deptId =  useVModel(props, "modelValue", emits); // 实现父组件 v-model绑定的值跟本组件modelValue关联起来
const deptOptions = useVModel(props, "deptOptions", emits);
const deptName = ref('')
const treeRef = ref<ElTree>()

interface Tree {
  [key: string]: any
}
// 当副作用中依赖的响应式变量发生变化时
watchEffect(
  () => {
    treeRef.value!.filter(deptName.value);
  },
  {
    flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
  }
);
// 这里的类型表示data是一个键为字符串类型、值为任意类型的对象。
const handleNodeClick = (data: Tree) => {
  deptId.value = data.value;
  emits("node-click");
}
const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

onBeforeMount(() => {
  getDictDept().then((res) => {
        deptOptions.value = res.data
    })
})

</script>